<template>
  <div>
    <button
      :class="$style.button"
      @click="showModal = true"
      @mouseover="hover = true"
      @mouseleave="hover = false"
    >
      <div v-if="hover" :class="$style.hoverContent">
        <img
          src="/images/download_orange.png"
          :alt="hoverAltText"
          :class="$style.icon"
        />
        <p>{{ hoverText }}</p>
      </div>

      <div v-else :class="$style.defaultContent">
        <img
          src="/images/Ubuntu_icon.png"
          :alt="defaultAltText"
          :class="$style.icon"
        />
        <p>{{ defaultText }}</p>
      </div>
    </button>

    <div
      v-if="showModal"
      :class="$style.modalBackdrop"
      @click.self="showModal = false"
    >
      <div :class="$style.modalContent">
        <h3>{{ modalTitle }}</h3>
        <button :class="$style.smallButton" @click="downloadFile2204">
          {{ buttonText2204 }}
        </button>
        <button :class="$style.smallButton" @click="downloadFile2404" disabled>
          {{ buttonText2404 }}
        </button>
        <button :class="$style.closeButton" @click="showModal = false">
          {{ closeButtonText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute } from "vitepress";

// 获取当前语言
const route = useRoute();
const language = computed(() => (route.path.startsWith("/zh/") ? "zh" : "en"));

const showModal = ref(false);
const hover = ref(false);

const hoverText = computed(() =>
  language.value === "zh" ? "点击下载" : "Click to Download"
);
const defaultText = computed(() =>
  language.value === "zh" ? "Ubuntu" : "Ubuntu"
);
const hoverAltText = computed(() =>
  language.value === "zh" ? "下载" : "Download"
);
const defaultAltText = computed(() =>
  language.value === "zh" ? "Ubuntu" : "Ubuntu"
);
const modalTitle = computed(() =>
  language.value === "zh" ? "选择下载版本" : "Select Download Version"
);
const buttonText2204 = computed(() =>
  language.value === "zh" ? "下载 Ubuntu 22.04" : "Download Ubuntu 22.04"
);
const buttonText2404 = computed(() =>
  language.value === "zh" ? "下载 Ubuntu 24.04" : "Download Ubuntu 24.04"
);
const closeButtonText = computed(() =>
  language.value === "zh" ? "关闭" : "Close"
);

const version = "v2025.1.4";

function downloadFile2204() {
  const link = document.createElement("a");
  link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/mogan-stem-${version}-ubuntu22.04.deb`;
  link.download =
    language.value === "zh" ? `墨干${version}` : `Mogan ${version}`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function downloadFile2404() {
  const link = document.createElement("a");
  link.href = `https://mirrors.ustc.edu.cn/github-release/XmacsLabs/mogan/${version}/mogan-stem-${version}-ubuntu24.04.deb`;
  link.download =
    language.value === "zh" ? `墨干${version}` : `Mogan ${version}`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<style module>
.button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  background-color: white;
  color: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, background-color 0.2s;
  cursor: pointer;
}

.button:hover {
  transform: scale(1.05);
  background-color: #f0f0f0;
}

.button:active {
  transform: scale(0.95);
  background-color: #e0e0e0;
}

.defaultContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.button p {
  margin-top: 10px;
  font-size: 16px;
}

.hoverContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.modalBackdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modalContent {
  background: white;
  color: black;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.smallButton {
  margin: 10px;
  padding: 5px 10px;
  font-size: 14px;
  color: white;
  background-color: #ea4f06;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.smallButton:hover {
  background-color: #cc0000;
}

.smallButton:active {
  background-color: #990000;
}

.smallButton:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

.smallButton:disabled:hover {
  background-color: #ccc;
}

.closeButton {
  margin-top: 20px;
  padding: 5px 10px;
  font-size: 14px;
  color: white;
  background-color: #ea4f06;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.closeButton:hover {
  background-color: #cc0000;
}

.closeButton:active {
  background-color: #990000;
}

@media (max-width: 600px) {
  .button {
    width: 100px;
    height: 100px;
    padding: 8px;
  }

  .icon {
    width: 40px;
    height: 40px;
  }

  .button p {
    font-size: 14px;
    margin-top: 5px;
  }

  .hoverContent {
    font-size: 16px;
  }
}
</style>
